<template>
  <div class=''>
    <div class="radar-box">
      <div class="chart" :style="{ width: width + 'px', height: height + 'px' }">
        <ResponsiveBarChart :options="chartOptions" @bar-clicked="onBarClicked" />
      </div>
    </div>
  </div>
</template>

<script>
import ResponsiveBarChart from '@/components/echarts/ResponsiveBarChart.vue';
export default {
  name: 'SingleRing',
  props: {
    width: {
      type: Number,
      default: 410
    },
    height: {
      type: Number,
      default: 150
    },
    option: {
      type: Object,
      default() {
        return {}
      }
    },
    dataList: {
      type: Array,
      default: () => [
        { value: 1048, name: '消防系统', rate: 0.1 },
        { value: 735, name: '车辆安全驾驶系统车辆安全驾驶系统', rate: 0.1 },
        { value: 580, name: '安防系统', rate: 0.1 },
        { value: 484, name: '可燃气体监测', rate: 0.1 },
        { value: 300, name: '智慧用电监测', rate: 0.1 },
        { value: 1048, name: '酒精监测系统酒精监测系统酒精监测系统', rate: 0.1 },
        { value: 735, name: '防雷SPD浪涌监测', rate: 0.1 },
        { value: 580, name: '动环检测', rate: 99.3 }
      ]
    }
  },
  data() {
    return {
      chartOptions: {}
    };
  },
  computed: {},
  watch: {
    dataList: {
      handler(val) {
        this.getOption()
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.getOption()
  },
  mounted() {
  },
  methods: {
    onBarClicked() { },
    getOption() {
      let data = this.dataList

      this.chartOptions = {
        color: ["#309EFF", "#FF7734", "#D9E7FF", "#FFC1BD", "#FFC97A", "#2AE8BD", "#FF7F6E", "#8FABBF"],
        tooltip: {
          trigger: 'item',
          confine: true,
          borderColor: 'rgba(143, 171, 191, 0.30)',
          backgroundColor: 'rgba(18, 24, 29, 0.90)',
          textStyle: {
            color: 'white'
          },
        },
        legend: {
          top: '10%',
          left: 105,
          padding: 15,
          borderRadius: 3,
          borderColor: '#f0f0f0',
          orient: 'vertical',
          itemWidth: 8,
          itemHeight: 8,
          itemStyle: {
            borderWidth: 0
          },
          textStyle: {
            color: "#D9E7FF",
            fontSize: 13,
            lineHeight: 16
          },
          formatter: function (name) {
            let item = data.filter(item => item.name == name)[0]
            return (name.length > 8 ? name.slice(0, 8) + '...' : name) + " " + item.rate + "%"
          },
          data: data
        },
        series: [
          {
            // name: 'Access From',
            type: 'pie',
            center: ['14%', '50%'],
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              borderColor: '#241E17',
              borderWidth: 4
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 14
              }
            },
            labelLine: {
              show: false
            },
            data: data
          }
        ],
        // ...this.option
      };
    }
  },
  components: {
    ResponsiveBarChart
  },
}
</script>

<style lang='less' scoped></style>